<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in homeSwiper" :key="'page'+index">
        <van-grid class="grid" :column-num="5" :border=border>
          <van-grid-item v-for="itemSon in item" :key="itemSon.id" :text=itemSon.title @click="onIconClick(itemSon)">
            <template #icon>
              <img :src=itemSon.img>
            </template>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Vue from 'vue';
import {Swipe, SwipeItem} from 'vant';
import {Grid, GridItem} from 'vant';

import { Toast } from 'vant';

Vue.use(Toast);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  name: "swiper",
  props:{
    homeSwiper:{
      type:Array
    }
  },
  data() {
    return {
      border:false
    }
  },
  methods:{
    onIconClick(itemSon){
      Toast(itemSon.title);
    }
  },
  created() {

  }
}
</script>

<style lang="less" scoped>

img {
  width: .8rem;
  height: .8rem;
  margin-bottom: .2rem;
}
.grid{
  margin: 0 .2rem;
}

/deep/ .van-grid-item__content{
  background-color: #F4F4F4;
}
.my-swipe {
  background-color: #F4F4F4;
  margin: .2rem;
  border-radius: .2rem;
  /deep/ .van-swipe__indicator {
    width: .4rem;
    height: .08rem;
    border-radius: 0.05rem;
    //background: linear-gradient(270deg, #fff 0%, #fff 100%);
    background: linear-gradient(270deg, #ffffff 0%, #ffffff 100%);
  }
  /deep/ .van-swipe__indicator--active {
    background: linear-gradient(270deg, rgba(255, 109, 42, 1) 0%, rgba(255, 109, 42, 1) 100%);
  }
  /deep/ .van-swipe__indicator--inactive {
    //background: linear-gradient(270deg, rgba(212, 216, 222, 1) 0%, rgba(212, 216, 222, 1) 100%);
    //background: linear-gradient(270deg, rgba(255, 255, 225, 0) 0%, rgba(255, 255, 255, 0) 100%);
    //background: linear-gradient(270deg, blue 0%, blue 100%);

  }
}

</style>